<template>
  <div class="courseInfo-wrap">
    <van-sticky>
      <van-nav-bar :title="data.course.courseName"
                   left-text="返回"
                   left-arrow
                   @click-left="onClickLeft"
                   @click-right="onClickRight">
        <template #left>
          <van-icon name="arrow-left"
                    size="20"
                    color=" #87d4eb;" />
        </template>
        <template #right>
          <van-icon name="share-o"
                    size="20" />
        </template>
      </van-nav-bar>
    </van-sticky>
    <img class="info-img"
         :src="data.course.courseImg" />
    <!-- 信息导航,吸顶粘性布局 -->
    <van-sticky :offset-top="40">
      <van-tabbar class="typenav"
                  v-model="active"
                  active-color="#87d4eb"
                  @change="onTagChange">
        <van-tabbar-item v-for="item in data.typeNav"
                         :key="item">{{
          item.tag
        }}</van-tabbar-item>
      </van-tabbar>
    </van-sticky>
    <!-- 课程简介 -->
    <div id="tag0"
         class="commonWrap courseInfo">
      <div class="courseInfo-title">
        <div class="courseInfo-name">{{ data.course.courseName }}</div>
        <div class="courseInfo">
          <div class="courseInfo-popularity">
            已有 {{ data.course.participantCount }}人加入学习
          </div>
          <div class="courseInfo-hour"
               v-if="data.course.courseLesson">
            {{ data.course.courseLesson.length }}课时
          </div>
        </div>
      </div>
      <div class="courseInfo-content">
        <!-- &nbsp;&nbsp;&nbsp;&nbsp;{{ data.course.courseName }} -->
      </div>
    </div>
    <!--课程章节-->
    <van-list id="tag1"
              class="commonWrap">
      <span class="title">课程章节</span>
      <van-cell @click="getIndex(index)"
                is-link
                v-for="(item, index) in data.course.courseLesson"
                :key="item"
                :to="{
          name: 'CourseLearning',
          params: {
            courseId: data.course.courseId,
            index: index,
            lessonId: data.course.courseLesson[index].lessonId,
          },
        }">
        第{{ index + 1 }}章节:&nbsp;&nbsp;{{ item.lessonName }}
      </van-cell>
    </van-list>
    <!-- 讲师介绍 -->
    <my-teacher-info :data="data.course.teacherVoList"></my-teacher-info>
    <!-- 学生评价 -->
    <my-stu-evaluate></my-stu-evaluate>
  </div>
</template>
<script>
import { reactive, getCurrentInstance, onMounted, ref } from 'vue'
import MyTeacherInfo from '@/components/Course/user/MyTeacherInfo.vue'
import MyStuEvaluate from '@/components/Course/user/MyStuEvaluate.vue'
import router from '@/router/index.js'
export default {
  setup () {
    const active = ref(0)
    const { ctx, proxy } = getCurrentInstance()
    const data = reactive({
      course: {
        courseId: ''
      },
      typeNav: [
        {
          tag: '课程简介'
        },
        {
          tag: '课程章节'
        },
        {
          tag: '讲师介绍'
        },
        {
          tag: '学生评价'
        }
      ]
    })
    const getIndex = (index) => {
      window.sessionStorage.setItem('index', index)
      window.localStorage.setItem(
        'lessonId',
        data.course.courseLesson[index].lessonId
      )
      window.sessionStorage.setItem(
        'lessonId',
        data.course.courseLesson[index].lessonId
      )
      console.log(window.sessionStorage.getItem('lessonId'))
    }
    function onTeacherInfo () {
      proxy.$router.push('/Course/CourseInfo')
    }
    function onClickLeft () {
      // window.history.length > 1
      //   ? proxy.$router.go(-1)
      //   :
      proxy.$router.push('/')
    }
    function onClickRight () { }
    const mygetCourseById = () => {
      console.log(window.sessionStorage.getItem('courseId'))
      proxy.$axios.course
        .getCourseMoreInfoById(window.sessionStorage.getItem('courseId'))
        .then((res) => {
          if (res.status === 200) {
            console.log(res)
            data.course = res.data.data
          }
        })
    }
    const onTagChange = (index) =>
      document
        .getElementById('tag' + index)
        .scrollIntoView({ behavior: 'smooth', block: 'center' })

    onMounted(() => {
      mygetCourseById()
    })
    return {
      getIndex,
      active,
      data,
      onClickLeft,
      onClickRight,
      onTeacherInfo,
      onTagChange,
      mygetCourseById
    }
  },
  components: {
    MyTeacherInfo,
    MyStuEvaluate
  },
  created () {
    // 路由传参，测试接收传过来的课程ID
    // console.log(this.$route.params.courseId)
    // console.log(router.currentRoute.value.params.courseId);
    // 访问接口，根据课程ID获取选中的课程信息
    // this.mygetCourseById()
  }
}
</script>
<style lang="scss" scoped>
.courseInfo-wrap {
  margin: 0;
  padding: 0;
  width: 100%;
  justify-content: space-between;
  .info-img {
    width: 100%;
  }
  .typenav {
    bottom: auto;
    position: relative;
    height: 30px;
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);
  }
  .courseInfo-name {
    margin: 10px auto;
    font-size: 20px;
  }
  .courseInfo {
    display: flex;
    justify-content: space-between;
    .courseInfo-popularity {
      font-size: 12px;
    }
    .courseInfo-hour {
    }

    // .courseInfo-content {
    //   padding-top: 20px;
    //   font-size: 12px;
    // }
  }
}
</style>
